<template>
  <div class="drawer">
    <el-drawer v-model="drawer" :z-index="1000" size="50%" :lock-scroll="true" :with-header="false" >
      <template v-for="(item,index) in navs" :key="item.id">
        <div class="drawer-item" @click="navHandleClick(index ,item.path)">{{item.title}}</div>
      </template>
      <div v-if="!localCache.getCache(LOGIN_TOKEN)" @click="toLoginHandle">登录</div>
      <div v-else class="login-list">
    
          <div  class="login-list-avatar">
            <img  :src="avatarUrl" alt="">
            
          </div>
            <div>欢迎{{nickname}}</div>
            <div  @click="changeInformationClick">修改信息</div>
            <div  @click="loginOutHandleClick">退出登录</div>            
      </div>
    </el-drawer>
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { localCache } from '@/utils/cache'
import { LOGIN_TOKEN } from '@/global/constants'
import useLoginStore from '@/store/login/login'
import { storeToRefs } from 'pinia';
import emitter from '@/utils/evenBus';
const loginStore = useLoginStore()
const { avatarUrl, nickname } = storeToRefs(loginStore)

const router = useRouter()
const drawer = ref<any>(false)

const navs = reactive([
  {id: '0' , title: '首页' , path: '/homePage'},
  {id: '1' , title: '学习日志', path: '/study'},
  {id: '2' , title: '实战项目', path: '/project'},
  {id: '3' , title: '友链', path: '/friends'},
  {id: '4' , title: '个人日志', path: '/stoneLog'},
])

let navIdex = ref<Number>(0)

function navHandleClick (index: number, path: string) {
  // console.log(index,path)
  navIdex.value = index
  router.push(path)
  drawer.value = false
}

function toLoginHandle() {
  router.push('/login')
}

function changeInformationClick() {
  router.push('/information')
}

//退出登录
function loginOutHandleClick() {
  localCache.removeCache(LOGIN_TOKEN)
  localCache.removeCache('nickname')
  localCache.removeCache('avatarUrl')
  localCache.removeCache('signature')
  // localCache.removeCache('name')
  localCache.removeCache('link')
  router.push('/login')
}

emitter.on("event", (info) => {
  drawer.value = info
});

</script>


<style scoped lang="less">
.drawer {
  color: #409EFF;
  font-weight: bolder;
  .drawer-item {
    margin: 6px 0;
  }
  .login-list {
  margin-top: 300px;
  .login-list-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      border-radius: 50%;
    }
  }
  div {
    margin-top: 10px;
    text-align: center;
  }
}
}
</style>
